<!-- 首页 -->
<template>
	<view class="bd">
		<nonDevModeWarn v-if="xhrFailed"></nonDevModeWarn>

		<!--search start-->
		<view>
			<uni-section title="搜索框" type="line">
				<uni-search-bar placeholder="阅读,解密,找搭子..." @confirm="search" v-model="searchValue" @focus="focus"
					@input="input" @cancel="cancel" @clear="clear">
				</uni-search-bar>


			</uni-section>

		</view>
		<!--search end-->
		<!-- background-image: url("https://sprtlias.oss-cn-hangzhou.aliyuncs.com/84999abd-1018-42b3-9178-e42fec7e0e8c.png"); -->
		<view class="book-kinds">
			<view class="book-kinds-item">

				<image src="../../static/041_星球.png" @click="gotoUrl('/pages/myBookList/myBookList')"
					class="book-kinds-item-pic"></image>
				<view class="book-kinds-item-text">书架</view>
			</view>
			<view class="book-kinds-item" @click="gotoMoreBook()">
				<image src="../../static/041_艺术.png" class="book-kinds-item-pic"></image>
				<view class="book-kinds-item-text">书城</view>
			</view>

			<view class="book-kinds-item" @click="gotoUrl('/pages/community/community')">
				<image src="../../static/041_收藏-17.png" class="book-kinds-item-pic"></image>
				<view class="book-kinds-item-text">社区</view>
			</view>

			<view class="book-kinds-item" @click="gotoUrl('/pages/shop/home')">
				<image src="../../static/041_数据-29.png" class="book-kinds-item-pic"></image>
				<view class="book-kinds-item-text">商城</view>
			</view>

		</view>

		<view class="RecommendBook">
			<view class="textTitle">
				每日推荐
			</view>
			<view class="ItemTitle">
				每天看点有意思的
			</view>
			<view class="overflowXCtn">
				<view class="content" v-for="(item,index) in fetchBookList" :key="item.id">

					<view class="ItemCtn1" @click="gotoReadMore(item.bookUrl)">
						<view class="ItemImg">
							<image class="ItemImgInner" :src="item.bookImg"></image>
						</view>
						<view class="ItemText">
							<view class="upText">
								{{item.bookName}}
							</view>
							<view class="downText">
								{{item.author}}
							</view>
						</view>

					</view>
				</view>
			</view>


		</view>

		<!-- 全部咨询展示 -->
		<scroll-view class="book-lists" scroll-y>
			<!-- 每日新闻 -->
			<!-- 选项卡 -->
			<view class="tab-ctn">
				<view v-for="(tab,index) in tabs" :key="index" :class="['tab-item',currentTab=== index?'active' :''  ]"
					@click="switchTab(index)">


					{{tab}}
				</view>

			</view>


			<view class="tab-content">

				<!-- 展示热门0 -->
				<view v-if="currentTab===0" class="content1">
					<view class="ItemCtn" v-for="(item,index) in fetchBookList" @click="gotoReadMore(item.bookUrl)"
						:key="index">

						<view class="ItemImg">
							<image class="ItemImgInner" :src="item.bookImg"></image>
						</view>
						<view class="ItemText">
							<view class="upText">
								{{item.bookName}}
							</view>
							<view class="downText">
								{{item.bookDescription}}
							</view>
						</view>
					</view>


				</view>

				<!-- 展示每日资讯1 -->
				<view v-if="currentTab===1" class="content1">
					<view class="content1-item" v-for="(item,index) in fetchZhihuPerday" :key="index">
						<view class="content1-pic">
							<image class="content1-img" :src="item.image"></image>
						</view>
						<view class="content1-msg">
							<view class="content1-msg-up">
								{{item.hint}}
							</view>
							<view class="content1-msg-down">
								{{item.title}}
							</view>
						</view>
					</view>


				</view>


				<!-- 展示问答社区2 -->
				<view v-if="currentTab===2" class="content1">
					<view class="content1-item" v-for="(item,index) in fetchZhihuPerday" :key="index">
						<view class="content1-pic">
							<image class="content1-img" :src="item.image"></image>
						</view>
						<view class="content1-msg">
							<view class="content1-msg-up">
								{{item.hint}}
							</view>
							<view class="content1-msg-down">
								{{item.title}}
							</view>
						</view>
					</view>


				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import nonDevModeWarn from 'pages/models/nonDevModeWarn.vue'

	import {
		gotoUrl
	} from "@/utils.js"

	import {
		data
	} from 'uview-ui/libs/mixin/mixin'

	import {
		wxlogin,
		getBookByMsg, //条件获取书籍列表
	} from '@/config/api.js'

	export default {
		components: {
			nonDevModeWarn,
		},

		mounted() {
			//this.fetchNewsPerDay() //抓取每日新闻 的函数
			this.tologing() //登录函数，自动登录
			this.fetchCommunicate() //问答社区
			this.getBookByMsgFun() //条件获取书籍列表

		},
		data() {
			return {
				gotoUrl,
				fetchBookList: [], //展示书籍
				tabs: ['热门', '每日资讯', '问答社区'],
				currentTab: 0,


				fetchZhihuPerday: [], //抓取到的知乎每日消息

				string: '',

				hotCommunicate: {},

				xhrFailed: false,
			}
		},
		methods: {
			//自动登录函数
			async tologing() {


				let _this = this;
				const token1 = uni.getStorageSync('token');
				// 拿到子组件传递的 头像 和 昵称 进行登录
				console.log("进入页面获得的token==》" + token1);
				if (token1) {
					wx.login({
							success: async (res) => {
								if (res.code) {
									_this.code = res.code;
									const params = {
										code: res.code,
										avatarurl: '2',
										nickname: '2',

									}
									try {
										const data = await wxlogin(params);

										console.log("成功res.data" + JSON.stringify(data))



										const currentTime = new Date().getTime() // 获取当前时间戳

										uni.setStorageSync('timestamp', currentTime);
										const token = uni.setStorageSync('token', JSON.stringify(data
											.wxtoken));
										console.log("全局缓存token成功---")
										this.$store.commit('setUserInfo', data); // 将数据保存到store中,wxtoken
										console.log("store-wxtoken" + JSON.stringify(this.$store.state
											.userInfo)); // 打印userInfo
										// _this.isLogining = true
										// _this.getUserMsg()
										Promise.resolve(token).then(() => {
											_this.fetchCommunicate() //问答社区
											return _this.getBookByMsgFun() //条件获取书籍列表
										}).then(() => {
											console.log(
												"全局缓存token成功后，fetchCommunicate() 和 getBookByMsgFun() 执行完成"
											);
										}).catch(err => {
											console.error("出错了：" + err);
										})



									} catch (error) {
										console.log("try WxLogin报错登录后台失败");
									}
								} else {
									console.log("请求code失败或code为空");
								}
							},
							fail: (error) => {
								console.log("wx.login调用失败", error);
							}
						}


					);
				}




			},
			//获取书籍
			async getBookByMsgFun() {
				try {
					const res = await getBookByMsg()
					console.log(res)
					this.fetchBookList = res
				} catch (e) {
					uni.showToast({
						title: '请求失败!',
						icon: 'error',
					});
					this.xhrFailed = true
				}
			},
			//问答社区
			fetchCommunicate() {
				var that = this
				uni.request({
					url: 'https//api.isoyu.com/api/Zhihu/news?id=9454551',
					success(res) {
						console.log(res.data)
						that.hotCommunicate = res.data
						console.log("that.hotCommunicate--->" + that.hotCommunicate)

					}
				})
			},
			//进入书城
			gotoMoreBook() {
				uni.navigateTo({
					url: '/pages/index/index',

				})
			},
			//知乎每日阅读 跳转
			gotoReadMore(url) {
				//需要跳转的外部路径
				// let url = url1
				uni.navigateTo({
					url: '/pages/webview/webview?url=' + url
				})
			},
			// 切换横向选项卡
			switchTab(index) {
				this.currentTab = index
				var that = this
				if (that.currentTab == 1) {
					// 选中每日新闻，调用函数抓取
					that.fetchNewsPerDay() //抓取每日新闻 的函数
				}

			},

		}
	}
</script>

<style lang="scss" scoped>
	.overflowXCtn {
		width: 100%;
		overflow-x: auto;
		white-space: nowrap;
		/* 防止内容换行 */

		border-radius: 20%;

	}



	.ItemText {
		margin-left: 20rpx;

		.downText {
			color: rgb(150, 150, 150);
			overflow: hidden;
			// text-overflow: ellipsis;
			word-wrap: break-word;
			height: 45px;
		}

		.upText {
			font-size: 1.2rem;
			font-weight: 400;
			margin-bottom: 20rpx;
			overflow: hidden;
		}
	}

	.ItemTitle {
		color: rgb(139, 169, 210);
		font-size: 0.8rem;
		margin-top: 5px;
		text-align: center;
	}

	.ItemImgInner {
		border-radius: 20rpx;
		height: 95px;
		width: 100px;
	}

	.ItemImg {
		height: 95px;
		width: 100px;
		margin-top: 15rpx;
	}

	.ItemCtn {
		display: flex;
		height: 110px;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-top: 30rpx;
		padding-top: 20rpx;
		border-radius: 20rpx;
		background: linear-gradient(to bottom, rgb(234, 247, 255) 5%, rgb(255, 255, 255) 20%);

	}

	.ItemCtn1 {
		display: flex;
		height: 120px;

		border-radius: 20%;
		overflow-wrap: break-word;
		padding-top: 70rpx;
	}

	.content {


		display: flex;

		display: inline-block;
		width: 600rpx;
		height: 170px;


		justify-content: center;
		margin: auto;
		flex-direction: column;
		margin: 20rpx 0 0 20rpx;

		overflow: hidden;
		background: linear-gradient(to bottom, rgb(234, 247, 255) 5%, rgb(255, 255, 255) 20%);

		border-radius: 7%;

	}

	.textTitle::before {
		content: "";

		display: inline-block;
		margin-right: 40rpx;
		width: 200rpx;
		height: 10rpx;
		background: linear-gradient(to left, rgb(93, 160, 248), rgb(227, 239, 253));
	}

	.textTitle::after {
		content: "";

		display: inline-block;
		margin-left: 40rpx;
		width: 200rpx;
		height: 10rpx;
		background: linear-gradient(to right, rgb(93, 160, 248), rgb(227, 239, 253));
	}

	.textTitle {
		margin-top: 50rpx;
		text-align: center;
		color: rgb(20, 76, 169);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.RecommendBook {
		height: 480rpx;

		background-color: rgba(243, 242, 238, 0.3);
	}

	.content1-msg-down {
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 2;
		width: 100%;

	}

	.content1-msg-up {
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 1;
		width: 100%;

	}

	.content1-msg {
		flex: 1;
		height: 100%;
		display: flex;
		text-align: center;
		flex-direction: column;

	}

	.content1-img {
		width: 100%;
		height: 100%;
		margin: auto;
		/* padding-left: 30rpx; */
		/* border: 2rpx black solid; */

		padding-right: 10rpx;
	}

	.content1-pic {
		margin: 10rpx 0;
		width: 200rpx;
		height: 90%;
		padding-left: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 4rpx;

	}

	.content1 {
		height: auto;


	}

	.content1-item {
		display: flex;
		height: 270rpx;
		margin-bottom: 15rpx;
		border: 2rpx solid black;


		flex-direction: row;


	}

	.tab-content {
		padding: 6px;
		border: 1px solid #ccc;
		height: auto;
	}

	.tab-item {
		flex: 1;
		padding: 10px 30px;
		cursor: pointer;
		height: 30rpx;
		/* color: rgb(250, 47, 116); */
		color: rgb(20, 76, 169);
		font-weight: 400;
		text-align: center;
		/* image: antiquewhite; */
		/* border: 2rpx solid orange; */
		border-radius: 5px 5px 0 0;
		font-size: 0.9rem;

	}

	.tab-item.active {
		background-color: #fff;
		/* border-bottom: 4px solid rgb(250, 47, 116); */
		border-bottom: 4px solid rgb(20, 76, 169);
	}

	.tab-ctn {
		display: flex;
	}

	.book-lists-item-pic {
		margin-top: 15rpx;
		border: 1rpx gainsboro solid;
		width: 300rpx;
		height: 280rpx;
	}

	.book-lists-items {
		text-align: center;
		width: 100%;

		height: auto;

		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;

	}

	.book-lists-item {
		width: 350rpx;
		/* height: 400rpx; */
		margin: 10rpx;
		border-radius: 30rpx;
		box-sizing: border-box;

		height: auto;
		display: inline-block;

		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;


		background-color: white;
	}

	.book-lists {
		margin-top: 0rpx;
		width: 100%;
		flex: 1;
		height: auto;
		background-color: rgba(243, 242, 238, 0.3);

		/* background-color: rgb(248, 248, 248); */
		/* background-image: url('https://sprtlias.oss-cn-hangzhou.aliyuncs.com/201758ca-c23e-4095-8bfa-dfef30f77f32.png'); */
		/* background-color: rgba(243,242,238,0.3);: url('https://sprtlias.oss-cn-hangzhou.aliyuncs.com/831b8546-3170-4d6c-9cdc-a7c9f31f9d92.jpg') ; */
		/* background-color: rgba(255,255,255,1); */
	}

	.book-kinds-item-pic {

		width: 90rpx;
		height: 90rpx;
	}

	.book-kinds-item {
		font-size: 24rpx;
		flex: 1;
		text-align: center;
		box-shadow: 1rpx;
	}

	.book-kinds {

		margin: 0 auto;
		padding-top: 16rpx;
		width: 95%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(243, 242, 238, 0.3);

	}

	.bd {
		width: 100%;
		height: 100%;

		display: flex;
		flex-direction: column;
		/* background-image: url('https://sprtlias.oss-cn-hangzhou.aliyuncs.com/e02faa85-b79d-4648-b59d-ce10a119fc43.png'); */
		background-color: rgba(243, 242, 238, 0.3);

	}
</style>